/*
  学习目标：使用children属性，模拟Vue中的插槽
  1. 默认插槽
  2. 具名插槽 - 传递对象，对象内有对应的属性名
  3. 作用域
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    msg: '我是msg',
  };
  render() {
    return (
      <div>
        {/* 1. 默认插槽 */}
        <Child>{this.state.msg}</Child>

        {/* 2. 具名插槽 - 传递对象，对象内有对应的属性名 */}
        <ChildHasName>
          {{ header: '蜀道难', footer: '难于上青天' }}
        </ChildHasName>
        <ChildHasName>
          {{ header: '君不见', footer: '黄河之水天上来' }}
        </ChildHasName>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    const { children } = this.props;
    // console.log('this.props -----> ', this.props);
    return <div>我是Child组件 - {children}</div>;
  }
}

class ChildHasName extends React.Component {
  render() {
    // console.log('this.props -----> ', this.props);
    const { children } = this.props;
    return (
      <div>
        <header>我是header插槽 - {children.header}</header>
        <footer>我是footer插槽 - {children.footer}</footer>
      </div>
    );
  }
}
